<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <style>
        html, body {
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 0 10px;
            margin: 50px;
            color: #333;
        }

        .btn:hover {
            background-color: #eee;
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eee;
            text-align: center;
            font-size: 30px;
        }

        .progress {
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img/1.jpg" alt="pic" id="img" height="500">
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
</div>

<div class="loading">
    <p class="progress">0%</p>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/preload.js"></script>
<script>
    /*var imgs=[
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
    ]

    var index = 0,
        len = imgs.length,
        count=0,
        $progress=$('.progress');

    $.each(imgs,function (i,src) {
        var imgObj=new Image();
        $(imgObj).on('load',function () {
            $progress.html(Math.round((count+1)/len*100)+'%')
            if(count>=len-1){
                $(".loading").hide();
                document.title='1/'+len;
            }
            count++;
        })
        imgObj.src=src;
    })

    $('.btn').on('click', function () {
        if ('prev' === $(this).data('control')) { // 上一张
            index = Math.max(0, --index);
        } else { // 下一张
            index=Math.min(len-1,++index);
        }
        document.title=(index+1)+'/'+len;
        $('#img').attr('src',imgs[index]);
    })*/

    var imgs = [
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
        'img/5.jpg',
    ]

    var index = 0,
        len = imgs.length,
        $progress = $('.progress');

    $.preload(imgs, {
        each: function (count) {
            $progress.html(Math.round((count + 1) / len * 100) + '%')
        },
        all: function () {
            $(".loading").hide();
            document.title = '1/' + len;
        }
    })

    $('.btn').on('click', function () {
        if ('prev' === $(this).data('control')) { // 上一张
            index = Math.max(0, --index);
        } else { // 下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    })
</script>
</body>
</html>